<template>
  <div>
    <h4>评分组件数据展示：{{value1}}</h4>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-rate v-model="value1"></el-rate>
      </el-col>
      <el-col :span="6">
        <el-rate
            v-model="value1"
            show-text
            :colors="colors">
        </el-rate>
      </el-col>
    </el-row>
    <h4>开关组件数据展示：{{value2}}</h4>
    <el-row>
      <el-col :span="6">
        <el-switch v-model="value2"></el-switch>
      </el-col>
    </el-row>
    <h4>开关组件数据展示：{{value3}}</h4>

    <el-row>
      <el-col :span="6">
        <el-slider v-model="value3"></el-slider>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data(){
    return{
      value1: 1,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],

      value2: true,

      value3: 0,
    }
  }
}
</script>

<style scoped>
.el-row,h4{
  margin-top: 20px;
}
</style>